const render = require('../template/functool.art')

class ToolEvent {
  root: HTMLDivElement | null = null;
  draw: HTMLDivElement | null = null;
  zoomIn: HTMLDivElement | null = null;
  zoomOut: HTMLDivElement | null = null;
  canvas: HTMLCanvasElement | null = null;
  express: HTMLInputElement | null = null;
  xstart: HTMLInputElement | null = null;
  xend: HTMLInputElement | null = null;
  backAxis: HTMLDivElement | null = null;
  options: Options | null = null;

  constructor(options: Options) {
    this.options = options;
    this.root = options.root;
  }

  init() {
    if (this.root === null) {
      throw new Error('Not found root.')
    }

    this.root.innerHTML = render({
      buttons: this.options?.buttons
    })

    this.canvas = this.root.querySelector(".functool-canvas");
    this.draw = this.root.querySelector(".functool-draw-button");
    this.zoomIn = this.root.querySelector(".functool-zoom-in");
    this.zoomOut = this.root.querySelector(".functool-zoom-out");
    this.express = this.root.querySelector(".functool-express");
    this.xstart = this.root.querySelector(".functool-x-start");
    this.xend = this.root.querySelector(".functool-x-end");
    this.backAxis = this.root.querySelector(".functool-back-axis");
  }
}

export default ToolEvent;
